/*参观预约3步骤   2018-01-11 by lxx 814878176@qq.com*/
body {
    position: relative;
}
/*头部的banner图 ------ Begin*/
.mui-focusin > #header {
	position: static;   /*默认是absolute, 当输入框获取焦点的时候,会脱离标准流,导致页面样式乱*/
}
.banner {
	display: none;
	width: 100%;
	height: 3.1875rem;  /*102px*/
	margin-top: 2.5%;
	position: relative;
}
.banner .banner-bg {
	width: 100%;
	height: 100%;
	background: url(/mars-wxclient/images/visit/banner.jpg);
	background-size: cover;
	-webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
    position: absolute;
	top: 0;
	left: 0;
}
.banner .content {
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(37,38,39,0.4);
	position: absolute;
	top: 0;
	left: 0;
}
.banner .content .logo {
	width: 1.9375rem;
	height: 1.9375rem;  /*62px*/
	background: rgba(1,174,241,0.4) url(/mars-wxclient/images/visit/logo.png) no-repeat center;
	background-size: cover;
	border: 1px solid #ffffff;
	border-radius: 100%;
	position: absolute;
	left: 10%; /*32px*/
    top: 50%;
    margin-top: -0.96875rem; /*31px*/
}
.banner .content h2 {
	padding: 0 5%;
	line-height: 3.1875rem; 
	color: #fff;
	font-size: 0.375rem; /*12px*/
	/*单行文本省略...*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*头部的banner图 End*/
/*顶部流程条 --------- Begin*/
.navs {
	height: 1rem;
	background: #f5f5f5;
	margin: 0.3125rem 0 0.4375rem; /*10px 0 14px*/
	display: flex;
	justify-content: space-between;
}
.navs li {
	padding-left: 0.5rem;  /*伪元素before的位置*/
	width: 32.5%;
	line-height: 1rem;
	font-size: 0.375rem;  /*12px*/
	letter-spacing: 0.0375rem;
	text-align: center;
	background: #D8D8D8;
	display: inline-block;
	color: #fff;
	position: relative;
}

.navs li:after {
	content: '';
	display: block;
	border-top: 0.5rem solid transparent;
	border-bottom: 0.5rem solid transparent;
	border-left: 0.5rem solid #D8D8D8;
	position: absolute;
	right: -0.5rem;
	top: 0;
	z-index: 10;
}

.navs li:before {
	content: '';
	display: block;
	border-top: 0.5rem solid #D8D8D8;
	border-bottom: 0.5rem solid #D8D8D8;
	border-left: 0.5rem solid #f5f5f5;
	position: absolute;
	left: 0px;
	top: 0;
}

.navs li:first-child {
	width: 31.25%;
	padding-left: 0rem;  /*不要第一个伪元素before的位置*/
}

.navs li:last-child {
	/*padding-right: 0.5rem;*/
}

.navs li:first-child:before {
	display: none;
}

.navs li:last-child:after {
	display: none;
}
/*当前流程*/
.navs li.active {
	background-color: #01b0f1;
}
.navs li.active:before {
	border-top: 0.5rem solid #01b0f1;
	border-bottom: 0.5rem solid #01b0f1;
}
.navs li.active:after {
	border-left-color: #01b0f1;
}
/*顶部流程条 End*/
/*流程条对应的内容块  ---------  Begin*/
.contents li {
	display: none;
}
/*当前流程内容*/
.contents li.active {
	display: block;
}
/*多行文本框 */
.welcomeWord {
    width: auto;
	background: none;
	margin: 0.1875rem 2% 0;
}
.welcomeWord .text {
	width: 100%;
	font-size: 0.375rem;
	border: 1px solid #d9d9d9;
	box-sizing: border-box;
	padding: 0.375rem;
}
/*复选框 checkbox*/
.checkbox {
	padding-bottom: 0.15625rem;  /*5*/
}
.checkbox > span span {
	display: block;
    line-height: 0.3125rem;
    font-size: 0.3125rem;
    color: #ccc;
    text-align: center;
    margin-top: ;
}
/*车牌号*/
.car-nums {
	width: 70%; 
}
.car-num {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;  /*保持和单选框容器样式布局一致*/
	padding-left: 0.3125rem;  /*10px*/
	padding-right: 5%;  /*11除以总宽度220(用70%表示了) = 5%*/
	position: relative;
} 
/*车牌地区选择*/
.car-num .selects {
	width: 0.9375rem;  /*30px*/
	height: 0.71875rem;
	line-height: 0.71875rem;
	color: #fff;
	font-size: 0.375rem;  /*12px*/
	background: #01B0F1;
	border-radius: 0.0625rem 0 0 0.0625rem; /*和input的保持一致 2px */
	position: absolute;
	top: 0.203125rem;
	left: 0.3125rem; /*默认,或者和父容器的左边距保持一致*/
}
/*车牌地区简称*/
.car-num .selects .addr {
	padding-left: 0.09375rem;
}
.car-num .selects .iconfont {
	color: #fff;
	font-size: 0.325rem;  /*10px*/
	position: absolute;
	top: 0;
	right: 0;
	
}
/*车牌选择和输入框*/
.car-num input {
	flex: none;  /*去掉公共样式的flex:1*/
	width: 50%;
	height: 0.71875rem;
    line-height: 0.71875rem;
	color: #01B0F1;
	font-size: 0.375rem;
	font-weight: bold;
	letter-spacing: 1px;
    text-indent: 0.1rem;
	border: 1px solid #01b0f1;
	border-radius: 0.0625rem;
	padding: 0 0.1rem 0 0.9375rem ;  /*30px  和车牌地区选择的宽度一致*/
	margin-top: 0.203125rem;
}
/*追加车牌号*/
.car-num .iconfont {
	color: #cac6c6;
	font-size: 0.625rem; /*20px*/
}
/*流程条对应的内容块 End*/

/*底部按钮 -------- Begin*/
.btns {
	width: 100%;
	max-width: 768px;
	text-align: center;
	background: #F5F5F5;
	position: absolute;
	bottom: 0;
	padding: 0.40625rem 0;
}
.btns .mui-btn {
	width: 7.03125rem;  /*225*/
	height: 1.09375rem;  /*35*/
	color: #fff;
	background-color: #01b0f1;
	border-radius: 4px;
	margin-bottom: 0.34375rem;
}
/*上一步 按钮*/
.btns .pre-btn {
	/*background-color: #d8d8d8;*/
	background-color: #4cd964;
}

/*底部按钮 End*/
/*车牌号弹出层 Begin*/
.mui-popover {
	width: 100%;
	border-radius: 0;
	background-color: #fff;
	text-align: center;
	top: auto !important; 
	bottom: 0 !important;
	left: 0 !important;
    position: fixed;
}
.mui-popover .mui-popover-arrow {
	width: 0;
}
/*列表容器*/
.mui-popover .mui-table-view {
	font-size: 0;
	border-radius: 0;
	text-align: left;
    background-color: #fff;
    padding: 2.7% 0 0.2% 2.7%;
}
#province li {
	display: inline-block;
	width: 11.5%;
	padding-bottom: 11.5%;
	background: #01b0f1;
    margin-right: 2.7%;
    margin-bottom: 1.5%;
	position: relative;
	
}
#province li span {
	display: inline-block;
    width: 100%;
    height: 0.4375rem;  /*和字体同样*/
   	color: #fff;
    font-size: 0.4375rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -0.21875rem;
}

#province .mui-btn {
	width: 7.03125rem;  /*225*/
	height: 1.09375rem;  /*35*/
	color: #fff;
	background-color: #01b0f1;
	border-radius: 4px;
	margin-bottom: 0.34375rem;
}


/*车牌号弹出层 End*/

/*参观日期 弹出层 Begin*/
#datePopover {
	width: 100%;
	height: 60%;
}
#datePopover .popover-btn {
	display: flex;
	justify-content: space-between;
	height: 10%;
}
#datePopover .popover-btn button {
	flex: 1;
	background: #D8D8D8;
}
#datePopover .popover-btn .confirm-btn {
	background: #01b0f1;
}
#datepicker {
	width: 100%;
	height: 90%;
}
#datepicker iframe {
	width: 100% !important;
	height: 100% !important;
}
/*参观日期 弹出层 End*/